// 学习目标：使用React创建h1标签、显示在浏览器中

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

// 创建元素
// createElement('标签的类型'，{标签的属性名：属性值}，标签的内容)
// const h1Dom = React.createElement( 'h1', { id: 123, title: '我是h1标题' }, 'Hello React' );

// const li1 = React.createElement('li', {}, '苹果');
// const li2 = React.createElement('li', {}, '香蕉');
// const li3 = React.createElement('li', {}, '西瓜');
// // React不会做HTML字符串解析
// const ul = React.createElement('ul', {}, li1, li2, li3);

// jsx语法糖
// js文件中使用HTML创建元素
// const ulNode = (
//   <ul>
//     <li>苹果</li>
//     <li>香蕉</li>
//     <li>西瓜</li>
//   </ul>
// );
const ulNode = (
  <>
    <div> 1233</div>
    <div> 1233</div>
    <div> 1233</div>
  </>
);

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(ulNode);
